<template>
	<view>
		<view class="card" v-for="(item,index) in words" :key="index" v-show="index===currentIndex">
			<view class="card-content">
				<view class="word word-top">
					{{item.word}}
				</view>
				<view class="img">
					<image :src="item.imgfile.url" mode="widthFix" v-show="type>2"></image>
				</view>
				<view
					:class="['word word-select',selectVal && op==selectVal && isRight ?'success':selectVal && !isRight && op==selectVal?'error':'']"
					:key="n" v-for="(op,n) in item.explains" @click="selectAns(op,item)">
					<text class="tn-margin-right-sm">{{sorts[n]}}.</text><text>{{op}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const pageDataCenter = uniCloud.importObject('page-data-center')
	const AUDIO = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				sorts: ['A', 'B', 'C', 'D'],
				words: [],
				type: 2,
				currentIndex: 0,
				isRight: null,
				selectVal: '',
				id: '',
				progress: '',
				word: 'word',
				share: {
					title: '词汇小课堂',
					imageUrl: 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/cloudstorage/2a9a20de-8e3c-4800-b520-646eeaf2133f.png',
					desc: '单词学习打打卡',
					content: '我今天学习了新单词，你也一起来呀'
				}
			}
		},
		onLoad(e) {
			this.type=parseInt(e.type)
			e.id && this.getData(e.id)
			// #ifdef MP-WEIXIN
			//解决IOS播放没声音
			wx.setInnerAudioOption({
				obeyMuteSwitch: false
			});
			// #endif
		},
		watch: {
			progress(val) {
				val && uni.setNavigationBarTitle({
					title: this.currentIndex + '/' + this.words.length
				})
			}
		},
		methods: {
			async getData(id) {
				this.id = id
				// 区分单词记词义还是词义记单词
				let res = this.type == 2 ? await pageDataCenter.getChapterWords(id) : await pageDataCenter
					.getChapterExplains(id,this.type)
				this.word = this.type == 2 ? 'word' : 'explain'
				console.log('res', res)
				this.words = res.data
				this.words.length && this.playVoice(this.words[0][this.word])
				uni.setNavigationBarTitle({
					title: '1/' + res.data.length
				})
			},
			selectAns(op, item) {
				console.log(op, item.explain)
				this.isRight = op == item.explain ? true : false
				this.selectVal = op
				console.log(this.isRight, this.selectVal)
				this.isRight && setTimeout(() => {
					this.currentIndex++
					this.selectVal = ''
					this.words[this.currentIndex] && this.playVoice(this.words[this.currentIndex][this.word])
					this.progress = `${(this.currentIndex/this.words.length)*100}%`
					this.currentIndex == this.words.length && this.submitProgress()
				}, 500)
			},
			submitProgress(redirectTo = 1) {
				pageDataCenter.submitProgress({
					chapter_id: this.id,
					type: this.type,
					progress: this.progress
				}, 'add').then((res) => {
					console.log('submitProgress', res)
					redirectTo && uni.redirectTo({
						url: '/pages/finish/finish?id=' + this.id + `&count=${this.words.length}`
					})
				})
			},
			playVoice(word) {
			  AUDIO.src = 'https://dict.youdao.com/dictvoice?type=0&audio='+word
			  this.$nextTick(function () {
			    AUDIO.play();
			  });
			},
		},
		onUnload() {
			this.submitProgress(0)
		},
		onShareAppMessage(res) {
			//实现根据不同页面返回不同的转发信息
			let pages = getCurrentPages();
			let routerUrl = pages[0].route //获取当前页的路径
			return {
				title: this.share.title,
				path: '/' + routerUrl, // 路径前面必须要加'/'
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
	page,
	.page {
		background-color: #e3ebee;
	}

	.card {
		padding: 20px;
		text-align: center;
		background-color: #fff;
		font-size: 16px;
		margin: 40px auto;
		border: 1px solid #eee;
		border-radius: 8px;
		width: 90%;
	}

	.word-top {
		font-size: 28px;
		margin: 30px 0;
		font-weight: 700;
	}

	.word-select {
		color: #333;
		padding: 10px;
		text-align: left;
		border: 1px solid #eee;
		border-radius: 8px;
		box-shadow: 0px 0px 1px rgba(0, 0, 0, .1);
		margin: 15px auto;
	}
	.img{
		text-align: center;
		margin: 10px 0;
	}
	.img image{
		width: 70%;
	}
	.success {
		border-color: #00cb62;
		background-color: #8bcb96;
	}

	.error {
		border-color: #ee0b0b;
		background-color: #cb9394;
	}
</style>